<template>
  <div class="boxs">
    <div class="left">
      <div
        class="content"
        v-for="item in list"
        :key="item.id"
        @click="open(item.id)"
      >
        <img :src="item.titleImage" alt="文章封面" />
        <p>{{ item.title }}</p>
        <p>{{ item.description }}</p>
        <div class="content-a" style="display: flex">
          <p v-for="cont in item.tags" :key="cont.id">
            {{ cont.name }}
          </p>
        </div>
      </div>

      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="ruleForm.current"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="ruleForm.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
    </div>

    <div class="right">
      <div class="top">
        <img :src="top.avatar" alt="作者头像" />
        <p>{{ top.author }}</p>
        <p>{{ top.introduction }}</p>
      </div>
      <div class="right-middle">
        <h4>分类</h4>
        <div class="right-cata" v-for="item in cata" :key="item.id">
          <div class="el-icon-folder-opened cata-content">{{ item.name }}</div>
        </div>
      </div>
      <div class="right-bottom">
        <h4>标签</h4>
        <div class="tage">
          <p class="right-tage" v-for="item in tage" :key="item.id">
            {{ item.name }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      total: 0,
      ruleForm: {
        current: 1,
        size: 10,
      },
      top: {},
      cata: [],
      tage: [],
    };
  },
  created() {
    this.getList();
    this.getTop();
    this.getCategories();
    this.getTags();
  },
  methods: {
    open(articleId) {
      console.log("跳转详情页,文章ID", articleId);
      this.$router.push(`/about/article/${articleId}`);
    },

    async getList() {
      try {
        const res = await this.$axios.post(
          "/api/index/article/list",
          this.ruleForm
        );
        this.list = res.data.data || [];
        this.total = res.data.total || 0;
        console.log("文章列表数据：", this.list);
      } catch (err) {
        console.error("获取列表失败：", err);
      }
    },

    async getTop() {
      try {
        const res = await this.$axios.post("/api/blog/setting/detail");
        this.top = res.data.data || {};
      } catch (err) {
        console.error("获取作者信息失败：", err);
      }
    },

    async getCategories() {
      try {
        const res = await this.$axios.post("/api/category/list");
        this.cata = res.data.data || [];
      } catch (err) {
        console.error("获取分类失败：", err);
      }
    },

    async getTags() {
      try {
        const res = await this.$axios.post("/api/tag/list");
        this.tage = res.data.data || [];
        console.log("标签数据：", this.tage);
      } catch (err) {
        console.error("获取标签失败：", err);
      }
    },

    handleSizeChange(val) {
      this.ruleForm.size = val;
      this.ruleForm.current = 1;
      this.getList();
    },

    handleCurrentChange(val) {
      this.ruleForm.current = val;
      this.getList();
    },
  },
};
</script>

<style scoped>
.boxs {
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.right {
  width: 285px;
  padding: 15px;
  margin-top: 30px;
}
.left {
  width: 900px;
  height: 200px;
  margin-top: 40px;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.content {
  width: 440px;
  height: 344px;
  background-color: #fff;
  margin-bottom: 20px;
  border-radius: 15px;
  line-height: 40px;
  cursor: pointer;
}
.content img {
  width: 440px;
  height: 200px;
  border-radius: 15px;
  object-fit: cover;
}
.content p:nth-last-of-type(2) {
  text-align: left;
  color: #000;
  font-size: 20px;
  font-weight: bold;
  margin-left: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content p:nth-last-of-type(1) {
  text-align: left;
  margin-left: 20px;
  color: #666;
  font-size: 14px;
  height: 40px;
  overflow: hidden;
}
.content-a {
  margin-left: 10px;
}
.content-a p {
  line-height: 18px;
  font-size: 12px;
  text-align: center;
  color: #014737;
  background-color: #bcf0da;
  margin-right: 10px;
  border-radius: 5px;
  padding: 0 5px;
}
.top {
  margin: 0 auto 15px;
  height: 150px;
  padding: 20px;
  line-height: 30px;
  background-color: #fff;
  border-radius: 15px;
  text-align: center;
}
.top img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto;
}
.right-middle {
  margin-bottom: 15px;
  background-color: #fff;
  padding: 20px;
  line-height: 30px;
  font-size: 13px;
  border-radius: 15px;
}
.right-cata {
  padding: 0 10px;
  margin-bottom: 5px;
}
.right-cata:hover {
  cursor: pointer;
  background-color: #f0f0f0;
  border-radius: 8px;
}
.tage {
  display: flex;
  flex-wrap: wrap;
}
.tage p {
  display: inline-block;
  width: auto;
  margin: 5px;
  padding: 5px 10px;
  font-size: 12px;
  text-align: center;
  background-color: #bcf0da;
  color: #014737;
  border-radius: 5px;
}
.tage p:hover {
  color: #fff;
  background: #09977f;
  cursor: pointer;
}
.right-bottom {
  background-color: #fff;
  padding: 20px;
  border-radius: 15px;
}
.pagination-container {
  width: 100%;
  text-align: center;
  margin: 20px 0;
}
</style>